<template>
	<view class="topWindow">
		<uv-row justify="flex-start" align="center">
			<uv-image :src="appName=='元画'?'../../static/logo2.png':'../../static/logo.png'" mode="widthFix" width="50px"
				height="50px" customStyle="margin-top:2px;margin-right:5px"></uv-image>
			<uv-text :text="'HI，欢迎来到'+appName+'！'"></uv-text>
			<uv-col span="7">
				<uv-tabs :scrollable="false" :list="tabbar" lineWidth="40" lineColor="#1684FC" :activeStyle="{
						color: '#1684FC',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
			    	}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" @click="toSecondMenu"
					:current="current"></uv-tabs>
			</uv-col>
		</uv-row>
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					var that = this;
					setTimeout(function() {
						const width = uni.getSystemInfoSync().screenWidth
						if (width && width >= 768) {
							let path = newRoute.path
							let comp
							if (path === '/') {
								comp = 'component'
								that.current = 0;
							} else {
								comp = path.split('/')[2]
							}
							// console.log(path);
							const tab = that.tabbar
							for (let item in tab) {
								if (comp == tab[item].en) {
									// console.log('selected', item);
									that.current = item;
								}
							}
						}
					}, 1000)
				}
			}
		},
		data() {
			return {
				appName: config.appName,
				tabbar: config.tabbar,
				current: 0,
			}
		},
		onLoad() {},
		methods: {
			toSecondMenu(e) {
				const tab = this.tabbar
				for (let item in tab) {
					if (e.en == tab[item].en) {
						// console.log('Tabbar', tab[item].url);
						this.current = item;
						uni.$uv.route({
							// type: 'redirectTo',
							url: tab[item].url,
						})
						// this.toSecondMenu(tab[item].url);
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.topWindow {
		height: 60px;
		background-color: #F9F8F8;

		.uv-row {
			max-width: 1200px;
			// height: 100%;
		}
	}

	// 测试
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>